<template>
  <!-- 搜索表单 -->
  <search @search="reload" :action="props.action" :badge-data="badgeData" />
  <ele-card :body-style="{ paddingTop: '8px' }">
    <!-- 表格 -->
    <ele-pro-table
      ref="tableRef"
      :columns="columns"
      :datasource="datasource"
      :show-overflow-tooltip="true"
      highlight-current-row
      border
      stripe
    >
      <template #offer="{ row }">
        <span class="pointer blue" @click="openOffer(row, '交强险')">
          交强险{{ row.offer_c_times }}
        </span>
        /
        <span class="pointer blue" @click="openOffer(row, '商业险')">
          商业险{{ row.offer_b_times }}
        </span>
      </template>

      <!-- <template #offer_c="{ row }">
        <span class="pointer blue" @click="openOffer(row, '交强险')">{{
          row.offer_c_times
        }}</span>
      </template>
      <template #offer_b="{ row }">
        <span class="pointer blue" @click="openOffer(row, '商业险')">{{
          row.offer_b_times
        }}</span>
      </template> -->
      <template #buy="{ row }">
        <span class="pointer blue" @click="openOffer(row, '全部')">查看</span>
        （商{{ row.offer_b_times }}/强{{ row.offer_c_times }}）
      </template>

      <template #actionOffer="{ row }">
        <el-button-group>
          <el-button type="warning" size="small" @click="openC(row)"
            >强险报价</el-button
          >

          <el-button type="danger" size="small" @click="openB(row)"
            >商业险报价</el-button
          >

          <el-button type="success" size="small" @click="toChoose(row, 10)"
            >提交</el-button
          >
        </el-button-group>
      </template>

      <template #actionConfirm="{ row }">
        <el-button-group>
          <el-button type="danger" size="small" @click="toChoose(row, 10)"
            >无法出单</el-button
          >
        </el-button-group>
      </template>
      <template #actionChoose="{ row }">
        <el-button-group>
          <el-button type="danger" size="small" @click="openReoffer(row)">
            重新报价
          </el-button>
          <el-button
            v-if="chooseStatus != 4 && chooseStatus != 3"
            type="success"
            size="small"
            @click="openWating(row)"
          >
            已阅
          </el-button>
        </el-button-group>
      </template>
      <template #actionBuy="{ row }">
        <el-button-group>
          <el-button-group>
            <!-- <el-button type="primary" size="small" @click="toDone(row)">
              已出单
            </el-button> -->
            <el-button type="danger" size="small" @click="openCantBuy(row)">
              无法出单
            </el-button>
          </el-button-group>
        </el-button-group>
      </template>
    </ele-pro-table>
  </ele-card>
  <!-- 报价 -->
  <offer-c v-model="showOc" :data="current" :plan-id="planId" @done="reload" />
  <offer-b v-model="showOb" :data="current" :plan-id="planId" @done="reload" />
  <!-- 报价列表 -->
  <offer-list
    v-model="showOffer"
    :data="current"
    :plan-id="planId"
    :offer-type="offerType"
    :action="props.action"
  />
  <!-- 重新报价 -->
  <create-plan
    v-model="showReoffer"
    action="reoffer"
    :data="current"
    @done="reload"
  />
  <!-- 已沟通 -->
  <wating v-model="showWating" :data="current" @done="reload" />
  <!-- 无法出单 -->
  <cant-buy v-model="showCantBuy" :data="current" @done="reload" />
</template>

<script setup>
  import { ref, computed } from 'vue';
  import Search from './search.vue';
  import { EleMessage } from 'ele-admin-plus/es';
  import { ElMessageBox } from 'element-plus/es';
  import { pageInsurancePlanList, setPlanStatus } from '@/api/company';
  import OfferC from './offer-c.vue';
  import OfferB from './offer-b.vue';
  import CreatePlan from './create-plan.vue';
  import Wating from './wating.vue';
  import CantBuy from './cant-buy.vue';
  import OfferList from './offer-list.vue';

  const props = defineProps({
    /** 弹窗是否打开 */
    modelValue: Boolean,

    action: String
  });
  /** 表格实例 */
  const tableRef = ref(null);

  /** 表格列配置 */
  const columns = computed(() => {
    const cols = [
      {
        prop: 'id',
        label: 'id',
        width: 85,
        align: 'center'
      },
      {
        prop: 'cate',
        label: '类型',
        width: 85,
        align: 'center'
      },
      {
        prop: 'plate_number',
        label: '车牌号码',
        width: 100,
        align: 'center'
      },
      {
        prop: 'company',
        label: '车队',
        width: 200
      },
      {
        prop: 'remark',
        label: '要求'
      },
      {
        width: 130,
        prop: 'deadline_c',
        label: '强险到期'
      },
      {
        width: 130,
        prop: 'deadline_b',
        label: '商业险到期'
      }
    ];
    if (props.action === 'choose' || props.action === 'offer') {
      cols.push({
        width: 150,
        label: '报价情况',
        slot: 'buy',
        align: 'center'
      });
    }
    if (props.action === 'offer') {
      cols.push({
        columnKey: 'actionOffer',
        label: '操作',
        slot: 'actionOffer',
        width: 230,
        align: 'center',
        fixed: 'right'
      });
    }
    if (props.action === 'choose') {
      if (chooseStatus.value === 2) {
        cols.push({
          label: '已阅备注',
          prop: 'wating_content',
          minWidth: 140
        });
      }
      if (chooseStatus.value === 4) {
        cols.push({
          label: '原因',
          prop: 'cantbuy_content'
        });
      }

      cols.push({
        columnKey: 'actionChoose',
        label: '操作',
        slot: 'actionChoose',
        width: 160,
        align: 'center',
        fixed: 'right'
      });
    }
    if (props.action === 'buy') {
      cols.push({
        columnKey: 'buy',
        label: '出单要求',
        slot: 'buy',
        width: 150,
        align: 'center'
      });

      cols.push({
        columnKey: 'actionBuy',
        label: '操作',
        slot: 'actionBuy',
        width: 100,
        fixed: 'right'
      });
    }
    if (props.action === 'wating-confirm') {
      cols.push({
        columnKey: 'buy',
        label: '出单要求',
        slot: 'buy',
        width: 150,
        align: 'center'
      });

      cols.push({
        columnKey: 'actionBuy',
        label: '操作',
        slot: 'actionConfirm',
        width: 100,
        fixed: 'right'
      });
    }
    if (props.action === 'done') {
      cols.push({
        columnKey: 'buy',
        label: '出单情况',
        slot: 'buy',
        width: 150,
        align: 'center'
      });
    }
    return cols;
  });

  /** 表格选中数据 */
  const selections = ref([]);

  /** 当前编辑数据 */
  const current = ref(null);

  /** 搜索框里面的小红点数据 */
  const badgeData = ref({});

  /** 表格数据源 */
  const datasource = async ({ page, limit, where, orders }) => {
    const result = await pageInsurancePlanList({
      ...where,
      ...orders,
      page,
      limit,
      action: props.action
    });

    badgeData.value = result.badgeData;

    return result;
  };

  /** 默认搜索条件 */
  const chooseStatus = ref(1);
  /** 搜索 */
  const reload = (where) => {
    selections.value = [];
    tableRef.value?.reload?.({ page: 1, where });
    console.log('是这里出错？', where);
    chooseStatus.value = where ? where.choose_status : 1;
  };

  /** 报价 */
  const planId = ref(0);
  const showOc = ref(false);
  const openC = (row) => {
    planId.value = row.id;
    current.value = row ?? null;
    showOc.value = true;
  };
  const showOb = ref(false);
  const openB = (row) => {
    planId.value = row.id;
    current.value = row ?? null;
    showOb.value = true;
  };

  /** 报价详情 */
  const offerType = ref('商业险');
  const showOffer = ref(false);
  const openOffer = (row, type) => {
    current.value = row;
    planId.value = row.id;
    showOffer.value = true;
    offerType.value = type;
  };

  /** 重新报价 */
  const showReoffer = ref(false);
  const openReoffer = (row) => {
    current.value = row;
    showReoffer.value = true;
  };

  /** 已沟通 */
  const showWating = ref(false);
  const openWating = (row) => {
    current.value = row;
    showWating.value = true;
  };

  /** 无法出单 */
  const showCantBuy = ref(false);
  const openCantBuy = (row) => {
    current.value = row;
    showCantBuy.value = true;
  };

  // 提交报价
  // const toChoose = (row, status) => {
  //   if (row.offer_b_times == 0 && row.offer_c_times == 0) {
  //     EleMessage.warning('至少提供一份报价');
  //     return false;
  //   }
  //   ElMessageBox.confirm(
  //     '提交' + row.plate_number + '的报价至下一步吗？',
  //     '系统提示',
  //     {
  //       type: 'warning',
  //       draggable: true
  //     }
  //   )
  //     .then(() => {
  //       const loading = EleMessage.loading('请求中..');
  //       setPlanStatus({ id: row.id, status })
  //         .then(() => {
  //           loading.close();
  //           EleMessage.success('操作成功');
  //           reload();
  //         })
  //         .catch((e) => {
  //           loading.close();
  //           EleMessage.error(e.message);
  //         });
  //     })
  //     .catch(() => {});
  // };
</script>
